<template>
  <div>
     <el-image
      src="https://yqfk.dgut.edu.cn/static/bannerImg.3fd04ce9.png"
      fit="fill"></el-image>
    <p style="color: red">{{checkReportMsg}}</p>
    <el-form ref="reportForm" :model="formData" :rules="rules" size="medium" label-width="100px"
      style="text-align: left"
      label-position="top">
      <el-form-item label="1. 填报日期" prop="createTime">
        <el-date-picker v-model="formData.createTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
          :style="{width: '100%'}" readonly :disabled='true'></el-date-picker>
      </el-form-item>
      <el-form-item label="2. 姓名" prop="name">
        <el-input v-model="formData.name" readonly :disabled='true' clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="3. 证件号码" prop="certificateNumber">
        <el-input v-model="formData.certificateNumber" show-word-limit clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="4. 籍贯" prop="hometown">
        <el-input v-model="formData.hometown" placeholder="省、市、县" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="4. 身份类型" prop="userType">
        <el-select v-model="formData.userType" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in userTypeOptions" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="5. 所在校区" prop="campus">
        <el-select v-model="formData.campus" :style="{width: '100%'}">
          <el-option v-for="(item, index) in campusOptions" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="6. 手机号码" prop="phoneNumber">
        <el-input v-model="formData.phoneNumber" :maxlength="11" show-word-limit clearable
          :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="7. 紧急联系人" prop="urgentMan">
        <el-input v-model="formData.urgentMan" :maxlength="20" show-word-limit clearable
          :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="8. 紧急联系人联系方式" prop="urgentContract">
        <el-input v-model="formData.urgentContract" :maxlength="100" show-word-limit clearable
          :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="9. 当前所在国家" prop="currentLocationCountry">
        <el-input v-model="formData.currentLocationCountry" placeholder="请选择当前所在国家" clearable
          :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="10. 当前所在省份" prop="currentLocationProvince">
        <el-input v-model="formData.currentLocationProvince" placeholder="请选择当前所在省份" clearable
          :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="11. 当前所在市区" prop="currentLocationDistrict">
        <el-input v-model="formData.currentLocationDistrict" placeholder="请选择当前所在市区" clearable
          :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="12. 健康状况" prop="healthSituation">
        <el-select v-model="formData.healthSituation" placeholder="9. 健康状况" :style="{width: '100%'}">
          <el-option v-for="(item, index) in healthSituationOptions" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="13. 2021年06月01日至6月15日是否到达或途径疫情防控重点地区（以置顶显示的重点地区为准）" prop="isReachKeyArea">
        <el-select v-model="formData.isReachKeyArea" :style="{width: '100%'}">
          <el-option v-for="(item, index) in isReachKeyAreaOptions" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="14. 2021年06月01日至6月15日您是否有接触过疑似病例/确诊病例？" prop="isTouchDangerPerson">
        <el-select v-model="formData.isTouchDangerPerson" :style="{width: '100%'}">
          <el-option v-for="(item, index) in isTouchDangerPersonOptions" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="15. 备注" prop="remark">
        <el-input v-model="formData.remark" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="16. 今日体温（摄氏度，精确到小数点后一位，请按国家和学校规定如实填报，37.3以上为异常）" prop="field135">
        <el-input v-model="formData.bodyTemperature" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="17. 最近出行的时间地点" prop="lastestTravel">
        <el-input v-model="formData.lastestTravel" placeholder="无" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm" v-if="!isReport">提交</el-button>
        <el-button @click="resetForm"  v-if="!isReport">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { reportForm, checkReport,getStudentInfo } from '@/api/reportForm'
export default {
  components: {},
  props: [],
  data() {
    return {
      checkReportMsg: "",
      isReport: false,  
      formData: {
        createTime: "2021-06-20",
        name: "黎梓鹏",
        certificateNumber: 123456789123456780,
        hometown: "广东省云浮市新兴县",
        userType: "学生",
        campus: "松山湖校区",
        phoneNumber: 13447865421,
        urgentMan: "黎某某",
        urgentContract: 13475648621,
        currentLocationCountry: "中国",
        currentLocationProvince: "广东省",
        currentLocationDistrict: "东莞市",
        healthSituation: "良好",
        isReachKeyArea: 0,
        isTouchDangerPerson: 0,
        remark: undefined,
        bodyTemperature: 36.5,
        lastestTravel: '无',
      },
      rules: {
        createTime: [{
          required: true,
          message: '',
          trigger: 'change'
        }],
        name: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        certificateNumber: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        hometown: [{
          required: true,
          message: '省、市、县',
          trigger: 'blur'
        }],
        userType: [{
          required: true,
          message: '',
          trigger: 'change'
        }],
        campus: [{
          required: true,
          message: '',
          trigger: 'change'
        }],
        phoneNumber: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        urgentMan: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        urgentContract: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        currentLocationCountry: [{
          required: true,
          message: '请选择当前所在国家',
          trigger: 'blur'
        }],
        currentLocationProvince: [{
          required: true,
          message: '请选择当前所在省份',
          trigger: 'blur'
        }],
        currentLocationDistrict: [{
          required: true,
          message: '请选择当前所在市区',
          trigger: 'blur'
        }],
        healthSituation: [{
          required: true,
          message: '9. 健康状况',
          trigger: 'change'
        }],
        isReachKeyArea: [{
          required: true,
          message: '',
          trigger: 'change'
        }],
        isTouchDangerPerson: [{
          required: true,
          message: '',
          trigger: 'change'
        }],
        isolatedObservation: [{
          required: true,
          message: '',
          trigger: 'change'
        }],
        inDongGuan: [{
          required: true,
          message: '',
          trigger: 'change'
        }],
        remark: [],
        bodyTemperature: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        lastestTravel: [{
          required: true,
          message: '无',
          trigger: 'blur'
        }],
      },
      hometownOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      userTypeOptions: [{
        "label": "学生",
        "value": "学生"
      }, {
        "label": "老师",
        "value": "老师"
      }],
      campusOptions: [{
        "label": "松山湖校区",
        "value": "松山湖校区"
      }, {
        "label": "莞城校区",
        "value": "莞城校区"
      }],
      currentLocationCountryOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      currentLocationProvinceOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      currentLocationDistrictOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      healthSituationOptions: [{
        "label": "良好",
        "value": "良好"
      }, {
        "label": "异常(发热，体温在37.3摄氏度以上)",
        "value": "异(发热，体温在37.3摄氏度以上)"
      }, {
        "label": "异常(咳嗽)",
        "value": "异常(咳嗽)"
      }, {
        "label": "异常(头晕)",
        "value": "异常(头晕)"
      }, {
        "label": "异常(腹泻)",
        "value": "异常(腹泻)"
      }, {
        "label": "异常(乏力)",
        "value": "异常(乏力)"
      }, {
        "label": "异常(同时含两种以上症状)",
        "value": "异常(同时含两种以上症状)"
      }],
      isReachKeyAreaOptions: [{
        "label": "否",
        "value": 0
      }, {
        "label": "是",
        "value": 1
      }],
      isTouchDangerPersonOptions: [{
        "label": "否",
        "value": 0
      }, {
        "label": "是",
        "value": 1
      }],
      isolatedObservationOptions: [{
        "label": "否，没有隔离",
        "value": "否，没有隔离"
      }, {
        "label": "否，在外地集中隔离或居家隔离",
        "value": "否，在外地集中隔离或居家隔离"
      }, {
        "label": "是，居家隔离",
        "value": "是，居家隔离"
      }, {
        "label": "是，集中隔离",
        "value": "是，集中隔离"
      }],
      inDongGuanOptions: [{
        "label": "是，在莞",
        "value": "是，在莞"
      }, {
        "label": "否，已确定返莞时间",
        "value": "否，已确定返莞时间"
      }, {
        "label": "否，返莞时间未定",
        "value": "否，返莞时间未定"
      }],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getToken()
    checkReport().then(res => {
        this.checkReportMsg = res.msg
        this.isReport = res.data
    })
    // 获取用户信息
    this.getInfo()
  },
  mounted() {},
  methods: {
    getInfo(){
      getStudentInfo().then(res => {
        console.log(res.data);
        this.formData.name = res.data.name;
        // 获取当前日期
        this.formData.createTime = this.getNowFormatDate()
      })
    },
    getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },
    submitForm() {
      this.$refs['reportForm'].validate(valid => {
        if (!valid) return
        
       reportForm(this.formData).then(res => {
         window.location.replace("http://localhost:8081")
       })
      })
    },
    resetForm() {
      this.$refs['reportForm'].resetFields()
    },
    getToken(){
      let token = ''
      let url = window.location.href;
      if(url.indexOf("token") != -1){
        // 解析token
        token = url.split("=")[1].split("#")[0];
        //保存token到vuex
        this.$store.state.token = token;
        //保存token到
        window.localStorage.setItem("token", token);
      }else{
        //在vuex找token
        if(this.$store.state.token){
          token = this.$store.state.token
        }else if(window.localStorage.getItem("token")){
          token = window.localStorage.getItem("token")
        }
        console.log(token);
        if(token == '' || token){
          // 跳转到中央认证
          window.location.replace("http://localhost:8080/api/central/login")
        }
      }
    }
  }
}

</script>
<style>
</style>
